<template>
	<view class="bg">
		<view class="login">
			<view class="logo">
				<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/app/banner.png" mode="aspectFill"></image>
			</view>
			<view class="phone">
				<text class="phone-one">手机号</text>
				<text class="line">|</text>
				<input type="number" maxlength="11" placeholder="请输入手机号码" v-model="phone">
			</view>
			<view class="yzm-login" @click="getYzm"> 获取验证码 </view>
			<view class="btn_back" @click="back"> 返回 </view>
		</view>
		<view class="bottom">
			版本号：V{{version}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				version: '',
				phone: ''
			}
		},
		onLoad() {
			const info = uni.getSystemInfoSync()
			this.version = info.appWgtVersion
		},
		methods: {
			async getYzm() {
				if (!this.phone) {
					this.$pv.msg('请输入手机号')
				} else if (!this.isPhone(this.phone)) {
					this.$pv.msg('请输入正确的手机号')
				} else {
					let res = await this.$api.post('/SMS/AliSendV2', {
						mobile: this.phone
					})
					this.nav_to('/pages/start/yzm_login?phone=' + this.phone)
				}
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	body,
	html {
		width: 100%;
		height: 100vh;
	}

	.bg {
		width: 100%;
		height: 100vh;
		background-color: #fff;
	}

	.bottom {
		color: #cacaca;
		font-size: 22rpx;
		position: absolute;
		bottom: 70rpx;
		width: 100%;
		text-align: center;
		margin: 0;
	}

	.login {
		box-sizing: border-box;
		padding: 180rpx 88rpx 0 88rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.logo {
			width: 512rpx;
			height: 512rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			width: 100%;
			height: 100%;
			overflow-wrap: break-word;
			color: rgba(10, 10, 10, 1);
			font-size: 32px;
			font-family: PingFang-SC-Medium;
			font-weight: NaN;
			text-align: left;
			white-space: nowrap;
			line-height: 80rpx;
			margin: 80rpx 0;
		}

		.phone {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid rgba(10, 10, 10, 0.1);

			text {
				color: #000;
			}

			.line {
				margin: 0 20rpx;
				color: #999;
			}

			input {
				width: 400rpx;
				color: #333333;
			}
		}

		.yzm-login {
			width: 100%;
			box-sizing: border-box;
			box-shadow: 0px 4rpx 16rpx 0px rgba(46, 46, 46, 0.4);
			background-image: linear-gradient(225deg,
					rgba(2, 2, 2, 0.9) 0,
					rgba(54, 54, 54, 0.9) 100%);
			border-radius: 6px;
			margin-top: 40rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 90rpx;
		}

		.btn_back {
			width: 100%;
			box-shadow: 0px 4px 10px 0px rgba(46, 46, 46, 0.4);
			border-radius: 6px;
			text-align: center;
			margin-top: 40rpx;
			color: #000;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 90rpx;
		}
	}
</style>